<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <canvas width="400" height="400" id="canvas">
        请升级你的服务器
    </canvas>
    <script>
        var canvasBox = document.querySelector('#canvas')
        var context = canvasBox.getContext('2d');



        // setInterval(function () {
        //     left++
        //     // 清屏 绘制 渲染 
        //     // 动画实质就是静态画面连续播放
        //     context.clearRect(0, 0, 400, 400);
        //     context.fillRect(left,200,100,100);
        // },1000/60)
        function Rect(x, y, width, height, color) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.color = color;
        }
        Rect.prototype.update = function () {
            this.x++
            if (this.x > canvasBox.width) {
                this.x = -this.width;
            }
         
        }
        Rect.prototype.render = function (context) {
            context.fillStyle = this.color;
            context.fillRect(this.x, this.y, this.width, this.height);
        }
        var r = new Rect(0, 50, 100, 100, 'green')
        var r2 = new Rect(0, 200, 100, 100, 'blue')
        r.render(context)
        setInterval(function () {
            context.clearRect(0, 0, canvasBox.width, canvasBox.height);
            r.update()
            r.render(context)
            r2.update()
            r2.render(context)
        }, 1000 / 60)
    </script>
</body>

</html>